<script setup>
import {ref} from 'vue'
import {naiveTheme, antThemeAlgori, changeTheme, themeIcon} from '@/utils/component_lib_util.js'
import {useRouter} from "vue-router"
import {MANAGER_ROOT_ROUTE_NAME} from "@/router/routes/manager.js";
import {ROOT_ROUTE_NAME} from "@/router/index.js";
import {getRsaCommonPublicKeyAPI} from "@/api/rsa.js";

/**
 * 调整 naive 的主题变量
 */
const themeOverrides = {
  common: {
    primaryColor: '#409eff'
  }
}

/**
 * 顶部导航栏
 */
const router = useRouter()
// 顶部导航栏项激活索引
const topNavActiveIndex = ref('0')
// 顶部导航栏项选择处理(这里将路由的 name 作为 index 的值)
const topNavSelectHandler = (index) => {
  router.push({name: index})
}

/**
 * 获取 rsa 通用公钥
 */
getRsaCommonPublicKeyAPI().then(
    data => {
      console.log(data)
    }
)
</script>

<template>
  <!-- naive 配置组件 -->
  <n-config-provider :theme="naiveTheme" :theme-overrides="themeOverrides">
    <!-- ant design 配置组件 -->
    <a-config-provider :theme="{algorithm: antThemeAlgori}">
      <!-- app -->
      <div class="app">
        <!-- 顶部导航栏 -->
        <el-menu
            :default-active="topNavActiveIndex"
            mode="horizontal"
            :ellipsis="false"
            @select="topNavSelectHandler"
        >
          <el-menu-item :index="ROOT_ROUTE_NAME">
            <Logo></Logo>
          </el-menu-item>
          <div class="flex-grow" />
          <el-menu-item :index="MANAGER_ROOT_ROUTE_NAME">管理</el-menu-item>
        </el-menu>
        <!-- 路由组件展示 -->
        <router-view></router-view>
        <!-- 切换主题按钮 -->
        <a-float-button @click="changeTheme()">
          <template #icon>
            <div v-html="themeIcon"></div>
          </template>
        </a-float-button>
      </div>
    </a-config-provider>
  </n-config-provider>
</template>

<style scoped lang="scss">
.app {
  width: 100%;
  min-width: var(--app-min-width);
  height: 100vh;

  // 顶部导航栏左右划分
  .flex-grow {
    flex-grow: 1;
  }
}
</style>